<!DOCTYPE html>
<html>

<head>
    <title>新增角色</title>
</head>

<body>

<div class="page-header">
    <h1>${_resource_name!''}
        <small><i class="ace-icon fa fa-angle-double-right"></i>
            新增角色
        </small>
    </h1>
</div><!-- /.page-header -->

<div class="row">
    <div class="col-xs-12">
        <!-- PAGE CONTENT BEGINS -->
        <form id="common_form" class="form-horizontal" role="form" action="${ctlKey}/addSave" method="post">
            <div class="col-xs-12 col-sm-12">
                <@form_input l="key" name="roleKey" />
                <@form_input l="名称" name="roleName" p="名称"/>
                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right"> 描述 </label>
                    <div class="col-sm-7">
                        <div class="clearfix">
                            <textarea name="description" class="autosize-transition form-control" style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 92px;"></textarea>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1">  </label>
                    <div class="col-sm-7">

                        <div class="widget-box">
                            <div class="widget-header">
                                <h4 class="widget-title">请勾选资源</h4>
                                <div class="widget-toolbar">
                                    <a data-action="collapse" href="#">
                                        <i class="ace-icon fa fa-chevron-up"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="widget-body" style="display: block;">
                                <div class="widget-main">
                                    <div class="clearfix"></div>
                                    <table id="simple-table" class="table table-striped table-bordered table-hover">
                                        <thead>
                                        <tr>
                                            <th>
                                                <label class="pos-rel">
                                                    <input type="checkbox" class="ace" />
                                                    <span class="lbl"></span>
                                                </label>
                                                全选
                                            </th>
                                        </tr>
                                        </thead>

                                        <tbody>
                                        <#list tree as r>
                                            <tr>
                                                <td>
                                                    <label class="pos-rel">
                                                        <input type="checkbox" class="ace" id="r_${r.id}" name="resourceIdList" value="${r.id}" />
                                                        <span class="lbl"></span>
                                                    </label>
                                                    ${r.resourceName}
                                                </td>
                                            </tr>
                                            <@tableTree resource=r level=1 pid="r_${r.id}"/>
                                        </#list>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <@form_actions></@form_actions>

            </div>

        </form>
        <!-- PAGE CONTENT ENDS -->
    </div><!-- /.col -->
</div><!-- /.row -->

</body>
<my_script>
    <script src="/assets/js/jquery.validate.min.js"></script>
    <script src="/common/js/jquery.validate.default.js"></script>
    <script src="/common/js/common.form.js"></script>

    <script type="text/javascript">
        function submitHandler(){
            ctlKey = "/admin/role";
            return true;
        }
        var active_class = 'active';
        $('#simple-table > thead > tr > th input[type=checkbox]').eq(0).on('click', function(){
            var th_checked = this.checked;//checkbox inside "TH" table header

            $(this).closest('table').find('tbody > tr').each(function(){
                var row = this;
                if(th_checked) $(row).addClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', true);
                else $(row).removeClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', false);
            });
        });

        //select/deselect a row when the checkbox is checked/unchecked
        $('#simple-table').on('click', 'td input[type=checkbox]' , function(){
            var $row = $(this).closest('tr');
            if(this.checked) {
                $row.addClass(active_class);
                //选中所有子孙
                $("input[id^='"+$(this).attr("id")+"_']").each(function(){
                    if(!this.checked) {
                        $(this).closest('tr').addClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', true);
                    }
                });
            }else{
                $row.removeClass(active_class);
                //取消选中所有子孙
                $("input[id^='"+$(this).attr("id")+"_']").each(function(){
                    if(this.checked) {
                        $(this).closest('tr').removeClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', false);
                    }
                });
            }
        });
    </script>

</my_script>

</html>
<#macro tableTree resource level pid>
    <#if resource.childsResourceList?? && (resource.childsResourceList?size>0)>
        <#list resource.childsResourceList as r>
            <tr>
                <td>
                    <i class="col-sm-${level}"></i>
                    <label class="pos-rel">
                        <input type="checkbox" class="ace" id="${pid}_${r.id}" name="resourceIdList" value="${r.id}" />
                        <span class="lbl"></span>
                    </label>
                    ${r.resourceName}
                </td>
            </tr>
            <@tableTree resource=r level=level+1 pid="${pid}_${r.id}"/>
        </#list>
    </#if>
</#macro>